{% load static %}

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0,minimum-scale=1, maximum-scale=1, user-scalable=no">
    <title>查询进场记录</title>

    <link rel="stylesheet" href="{% static 'keyboard/licensePlateSelector.css' %}">
    <link rel="stylesheet" href="{% static 'bs5/css/bootstrap.min.css' %}">

    <style>
        html, body {
            height: 100%;
            margin: 0;
        }
        body {
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .content {

            width: 95%;
            padding: 15px;
            box-shadow: 0 0 10px rgba(0,0,0,0.1);
            text-align: center; 
        }
        .plate_input_box .new_energy {
            font-size: .9rem;
            line-height: 3.0rem;
            color: #a3a3a3;
            background-color: greenyellow;
        }

        .plate_input_box li {
            color: blue;
            font-size: 36px;
            height: 3.0rem;
            width: 3.0rem;
            line-height: 3.0rem;
            border: 1px solid #ccc;
            border-radius: 5px;
            text-align: center;
        margin: 0 .1rem;
        }
        .box{
            width: 100%;
            /* display: flex; */
            align-items: center;
            justify-content: space-evenly;
        }
        #demo {
            padding: 15px;
        }

        button {
            height: 55px;
            width: 120px;
        }
    </style>
</head>

<body>



    <div class="content">
        <h1>填写车牌号码</h1>
        <br>

        <div class="alert alert-warning alert-dismissible fade ">
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
            <strong>温馨提示！</strong> 未查询到任何记录。
        </div>
        
        <br>
        <div class="box">
            <div id="demo"></div>
        </div>

        <br>
        <span>
            <button class="find btn btn-success">查询记录</button>
            &nbsp; &nbsp; &nbsp;
            <button  class="clean btn btn-primary">清空车牌</button>
        </span>
    </div>

    

    <script src="{% static 'keyboard/jquery-3.6.0.min.js' %}"></script>
    <script src="{% static 'keyboard/licensePlateSelector.js' %}"></script>
    <script>
        /**
         * 实例化
        */
        let licensePlateSelector = new LicensePlateSelector();

        // 初始化
        licensePlateSelector.init({
            elem: "#demo",  // 根元素id
            // value: "鄂A",   // 默认填充车牌
            // activeIndex: 2,    // 默认选中下标 (从0开始，不传时，默认不选中)
            
            value: "",   // 默认填充车牌
            activeIndex: 0,    // 默认选中下标 (从0开始，不传时，默认不选中)

            inputCallBack:function(val){ // 输入事件回调
                console.log(val);
                let license_plate = licensePlateSelector.getValue(); // 获取当前车牌
                console.log(license_plate);

                // alert(license_plate);
            },
            deleteCallBack:function(){ // 键盘删除事件回调
                let license_plate = licensePlateSelector.getValue(); // 获取当前车牌
                console.log(license_plate);
            },
            closeKeyCallBack:function(){ // 关闭键盘事件回调
                console.log("键盘关闭");
            },
        })

        $(".clean").click(function(){
            licensePlateSelector.clearValue();
        })

        function getCookie(name) {
            let cookieValue = null;
            if (document.cookie && document.cookie !== '') {
            const cookies = document.cookie.split(';');
            for (let i = 0; i < cookies.length; i++) {
                const cookie = cookies[i].trim();
                // Does this cookie string begin with the name we want?
                if (cookie.substring(0, name.length + 1) === (name + '=')) {
                    cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                    break;
                }
            }
            }
                return cookieValue;
        }
        const csrftoken = getCookie('csrftoken');


        $(".find").click(function(){
            // 获取车牌号
            let license_plate = licensePlateSelector.getValue();
            // alert(license_plate);

            // 发送请求
            $.ajax({
                url: "{% url 'find' %}",
                type: "POST",
                data: {
                    license_plate: license_plate
                },
                headers: {
                    'X-CSRFToken': csrftoken
                },
                success: function(data){
                    console.log(data);
                    if(data.status == 200){
                        // alert("查询成功");  
                        window.location.href =  '/vr_app/payment/' + data.id;             

                    }else{
                        // alert(data.message);
                        console.log(data.message);
                        $('.alert').addClass('show');
                    }
                }
            })

        })

        $('.btn-close').click(function(){
            $('.alert').removeClass('show');
        })


    </script>
</body>

</html>